<!DOCTYPE html>
<html xmlns:c="http://www.w3.org/1999/html">
<head>
    <title>e栈懒人排行 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <!--引入的都是网址-->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <style type="text/css">
        .lazyboardCont {
            width: 100%;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead {
            width: 100%;
            background-image: linear-gradient(to top, #424890, #f4f4f4);
            box-shadow: 0px 3px 5px #666666;
        }

        .lazyboardHead .lazyboardHeadTitle {
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            color: #fff;
            font-weight: bold;
            background: url(wximages/sidaibg.png) no-repeat center center;
            background-size: cover;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 10px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank .ranknumDiv {
            width: 32%;
            margin-left: 1%;
            padding: 10px 0px;
            float: left;
            position: relative;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum2 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #72d664;
            overflow: hidden;
            box-shadow: 0px 0px 3px #72d664;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum1 {
            width: 50%;
            margin: 0 auto calc(50% - 40%);
            border-radius: calc(50%);
            border: 2px solid #f8ca03;
            box-shadow: 0px 0px 3px #f8ca03;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum3 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #b66ff3;
            box-shadow: 0px 0px 3px #b66ff3;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum2Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(wximages/ranknum2.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum1Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 17px);
            width: 34px;
            height: 34px;
            background: url(wximages/ranknum1.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum3Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(wximages/ranknum3.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNumName {
            font-size: 12px;
            width: 90%;
            margin: 15px auto 0px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardCont .lazyboardNavCont {
            width: 88%;
            margin: 30px auto 20px;
            overflow: hidden;
            border: 1px solid #4099eb;
            border-radius: 19px;
            box-shadow: 0px 0px 2px #888888;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNav {
            width: 33.3%;
            line-height: 38px;
            float: left;
            text-align: center;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNavFocus {
            background-image: linear-gradient(to top, #424890, #4099eb);
            color: #fff;
        }

        .boardRankScroll {
            width: 300%;
            margin: 20px 0px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardRankCont {
            width: calc(100% / 3);
            float: left;
        }

        .lazyboardCont .lazyboardRankCont .lazyboardRankDiv {
            width: 96%;
            height: 52px;
            padding: 10px 2%;
            margin-top: 5px;
            overflow: hidden;
            background: #fff;
            border-top: #f4f4f4;
            border-bottom: #f4f4f4;
            box-shadow: 0px 0px 2px #e1e1e1;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNumTxt {
            width: 35px;
            padding-right: 15px;
            line-height: 52px;
            text-align: center;
            font-size: 16px;
            font-weight: bolder;
            font-style: italic;
            float: left;
            color: #333333;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankIcon {
            width: 50px;
            height: 50px;
            float: left;
            border: 2px solid #4099eb;
            border-radius: 25px;
            overflow: hidden;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNameTxt {
            width: calc(100% - 50px - 52px - 85px - 10px - 25px);
            color: #333333;
            padding-left: 10px;
            line-height: 52px;
            font-size: 14px;
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankScore {
            width: 95px;
            padding-right: 10px;
            line-height: 52px;
            font-size: 20px;
            font-weight: bolder;
            float: right;
            color: #4099eb;
            text-align: right;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="./index.html">快递首页</a>
            <a href="./userhome.html">个人中心</a>
            <a href="./delivery.html">送货上门</a>
            <a href="./sendexpress.html">我要寄件</a>
            <a href="./lazyBoard.html">懒人排行</a>
            <a href="./expassistant.html">快递助手</a>
        </div>
    </div>
    <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
    <div class="lazyboardCont">
        <div class="lazyboardHead">
            <div class="lazyboardHeadTitle">快递懒人榜</div>
            <div class="lazyboardRank">
                <div class="ranknumDiv">
                    <div class="ranknum2">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum2Icon"></div>
                    <div class="rankNumName" id="totalRank1">-</div>
                </div>
                <div class="ranknumDiv">
                    <div class="ranknum1">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum1Icon"></div>
                    <div class="rankNumName" id="totalRank0">-</div>
                </div>
                <div class="ranknumDiv">
                    <div class="ranknum3">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum3Icon"></div>
                    <div class="rankNumName" id="totalRank2">-</div>
                </div>

            </div>
        </div>

        <div class="lazyboardNavCont">
            <div class="lazyboardNav lazyboardNavFocus">总排名</div>
            <div class="lazyboardNav">年排名</div>
            <div class="lazyboardNav">月排名</div>
        </div>

        <!--默认都显示十条了，实在不会写-->
        <table id="lazyBoard_table"></table>

    </div>
</div>
<script type="text/javascript">
    $(function () {
        //加载总榜数据
        $.getJSON("/front/lazyBoardInfo.do", {
            no: 0,
            paging: true,
            offset: 0,
            limit: 3
        }, function (data) {
            //[{size:总数,day:新增},{size:总数,day:新增}]
            $("#totalRank0").html(data.rows[0].userName);
            $("#totalRank1").html(data.rows[1].userName);
            $("#totalRank2").html(data.rows[2].userName);

        });

        lazyBoardLoad(0);
        $(".lazyboardNavCont .lazyboardNav").click(function () {
            var windowW = $(window).width();
            if (windowW > 600) {
                windowW = 600;
            }
            var indexnum = $(this).index();
            var focusnum = $(".lazyboardNavCont .lazyboardNav").index($(".lazyboardNavFocus"));
            $(this).siblings().removeClass("lazyboardNavFocus");
            $(this).addClass("lazyboardNavFocus");

            if (indexnum != focusnum) {
                $(".boardRankScroll").stop();
                switch (indexnum) {
                    case 0 :
                        lazyBoardLoad(0);
                        break;
                    case 1 :
                        lazyBoardLoad(1);
                        break;
                    case 2 :
                        lazyBoardLoad(2);
                        break;
                }
            }
        });
    });

    /**
     * 分页加载懒人榜信息
     * @param no
     */
    function lazyBoardLoad(no) {
        $("#lazyBoard_table").hide();
        $("#lazyBoard_table").fadeIn(2000);
        $("#lazyBoard_table").bootstrapTable({/*下面属于前端程序员的知识点*/
            url: "/front/lazyBoardInfo.do",	//数据请求地址
            striped: true,			//是否显示行的间隔
            pageNumber: 1,			//初始化加载第几页
            pagination: true,		//是否分页
            sidePagination: 'server',//选择服务器分页
            pageSize: 5,				//每一页显示数据
            pageList: [5, 10, 20],		//可选的单页显示数
            showRefresh: true,		//是否显示刷新按钮
            queryParams: function (params) {//通过params传递参数
                var obj = {
                    no: no,
                    paging: this.pagination,
                    offset: params.offset,
                    limit: params.limit
                };
                return obj;
            },
            /*表示哪一些列，与之对应*/
            columns: [
                {
                    title: "昵称",
                    field: "userName",
                    sortable: false/*表示是否显示可分类按钮*/
                },
                {
                    title: "快递数",
                    field: "expressCount",
                    sortable: false
                }
            ]
        });
    }
</script>
</body>
</html>